{% extends 'server/status/base.twig' %}
{% set active = 'monitor' %}
{% block content %}
  <h2 class="mb-3">{{ t('System monitor') }}</h2>

  <div class="mb-3 d-print-none">
    <button type="button" class="btn btn-primary" id="monitorPauseResumeButton">{{ get_icon('play', t('Start monitor')) }}</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#monitorSettingsContent" aria-expanded="false" aria-controls="monitorSettingsContent">{{ get_icon('s_cog', t('Settings')) }}</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#monitorInstructionsModal">{{ get_icon('b_help', t('Instructions/Setup')) }}</button>
  </div>

  <div class="collapse" id="monitorSettingsContent">
    <div class="card mb-3 d-print-none">
      <div class="card-body">
        <div class="mb-3">
          <button type="button" class="btn btn-secondary" id="monitorAddNewChartButton">{{ get_icon('b_chart', t('Add chart')) }}</button>
          <button type="button" class="btn btn-secondary" id="monitorRearrangeChartButton">{{ get_icon('b_tblops', t('Enable charts dragging')) }}</button>
          <button type="button" class="btn btn-primary d-none" id="monitorDoneRearrangeChartButton">{{ get_icon('s_okay', t('Done dragging (rearranging) charts')) }}</button>
        </div>

        <div class="row mb-3">
          <div class="col-auto">
            <label class="form-label" for="monitorChartRefreshRateSelect">{{ t('Refresh rate') }}</label>
            <select class="form-select" id="monitorChartRefreshRateSelect" name="monitorChartRefreshRate">
              {% for rate in [2, 3, 4, 5, 10, 20, 40, 60, 120, 300, 600, 1200] %}
                <option value="{{ rate }}"{{ rate == 5 ? ' selected' }}>
                  {%- if rate < 60 -%}
                    {{- t('%d second', '%d seconds', rate)|format(rate) -}}
                  {%- else -%}
                    {{- t('%d minute', '%d minutes', rate / 60)|format(rate / 60) -}}
                  {%- endif -%}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="col-auto">
            <label class="form-label" for="monitorChartColumnsSelect">{{ t('Chart columns') }}</label>
            <select class="form-select" id="monitorChartColumnsSelect" name="monitorChartColumns">
              {% for number_of_columns in 1..6 %}
                <option>{{ number_of_columns }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div>
          <p class="card-text">
            <strong>{{ t('Chart arrangement') }}</strong><br>
            <span class="text-body-secondary">{{ t('The arrangement of the charts is stored to the browsers local storage. You may want to export it if you have a complicated set up.') }}</span>
          </p>
          <div>
            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#monitorImportConfigModal">{{ t('Import') }}</button>
            <div class="modal fade" id="monitorImportConfigModal" tabindex="-1" aria-labelledby="monitorImportConfigModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="monitorImportConfigModalLabel">{{ t('Importing system monitor configuration') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
                  </div>
                  <div class="modal-body">
                    <form>
                      <label for="import_file" class="form-label">{{ t('Please select the file you want to import:') }}</label>
                      <input class="form-control" type="file" name="file" id="import_file">
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
                    <button type="button" class="btn btn-primary" id="monitorImportConfigImportButton">{{ t('Import') }}</button>
                  </div>
                </div>
              </div>
            </div>

            <button type="button" class="btn btn-secondary" id="monitorExportConfigButton">{{ t('Export') }}</button>
            <button type="button" class="btn btn-secondary" id="monitorResetConfigButton">{{ t('Reset to default') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="monitorInstructionsModal" tabindex="-1" aria-labelledby="monitorInstructionsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="monitorInstructionsModalLabel">{{ t('System monitor instructions') }}</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
        </div>
        <div class="modal-body">
          <p>
            {{ t("The phpMyAdmin Monitor can assist you in optimizing the server configuration and track down time intensive queries. For the latter you will need to set log_output to 'TABLE' and have either the slow_query_log or general_log enabled. Note however, that the general_log produces a lot of data and increases server load by up to 15%.") }}
          </p>
          <img class="ajaxIcon" src="{{ image('ajax_clock_small.gif') }}" alt="{{ t('Loading…') }}">

          <div class="ajaxContent"></div>

          <div class="monitorUse hide">
            <p><strong>{{ t('Using the monitor:') }}</strong></p>
            <p>
              {{ t("Your browser will refresh all displayed charts in a regular interval. You may add charts and change the refresh rate under 'Settings', or remove any chart using the cog icon on each respective chart.") }}
            </p>
            <p>
              {{ t('To display queries from the logs, click on any chart. Once confirmed, this will load a table of grouped queries, there you may click on any occurring SELECT statements to further analyze them.') }}
            </p>
            <p>
              {{ get_image('s_attention') }}
              <strong>{{ t('Please note:') }}</strong>
            </p>
            <p>
              {{ t('Enabling the general_log may increase the server load by 5-15%. Also be aware that generating statistics from the logs is a load intensive task, so it is advisable to select only a small time span and to disable the general_log and empty its table once monitoring is not required any more.') }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="modal fade" id="addChartModal" tabindex="-1" aria-labelledby="addChartModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addChartModalLabel">{{ t('Chart Title') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <div id="tabGridVariables">
          <p>
            <input type="text" name="chartTitle" value="{{ t('Chart Title') }}">
          </p>
          <input type="radio" name="chartType" value="preset" id="chartPreset">

          <label for="chartPreset">{{ t('Preset chart') }}</label>
          <select name="presetCharts"></select>
          <br>

          <input type="radio" name="chartType" value="variable" id="chartStatusVar" checked>
          <label for="chartStatusVar">
            {{ t('Status variable(s)') }}
          </label>
          <br>

          <div id="chartVariableSettings">
            <label for="chartSeries">{{ t('Select series:') }}</label>
            <br>
            <select id="chartSeries" name="varChartList" size="1">
              <option>{{ t('Commonly monitored') }}</option>
              <option>Processes</option>
              <option>Questions</option>
              <option>Connections</option>
              <option>Bytes_sent</option>
              <option>Bytes_received</option>
              <option>Threads_connected</option>
              <option>Created_tmp_disk_tables</option>
              <option>Handler_read_first</option>
              <option>Innodb_buffer_pool_wait_free</option>
              <option>Key_reads</option>
              <option>Open_tables</option>
              <option>Select_full_join</option>
              <option>Slow_queries</option>
            </select>
            <br>

            <label for="variableInput">
              {{ t('or type variable name:') }}
            </label>
            <input type="text" name="variableInput" id="variableInput">
            <br>

            <input type="checkbox" name="differentialValue" id="differentialValue" value="differential" checked>
            <label for="differentialValue">
              {{ t('Display as differential value') }}
            </label>
            <br>

            <input type="checkbox" id="useDivisor" name="useDivisor" value="1">
            <label for="useDivisor">{{ t('Apply a divisor') }}</label>

            <span class="divisorInput hide">
              <input type="text" name="valueDivisor" size="4" value="1">
              (<a href="#kibDivisor">{{ t('KiB') }}</a>,
              <a href="#mibDivisor">{{ t('MiB') }}</a>)
            </span>
            <br>

            <input type="checkbox" id="useUnit" name="useUnit" value="1">
            <label for="useUnit">
              {{ t('Append unit to data values') }}
            </label>
            <span class="unitInput hide">
              <input type="text" name="valueUnit" size="4" value="">
            </span>

            <p>
              <a href="#submitAddSeries">
                <strong>{{ t('Add this series') }}</strong>
              </a>
              <span id="clearSeriesLink" class="hide">
                | <a href="#submitClearSeries">{{ t('Clear series') }}</a>
              </span>
            </p>

            {{ t('Series in chart:') }}
            <br>
            <span id="seriesPreview">
              <em>{{ t('None') }}</em>
            </span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="addChartButton" data-bs-dismiss="modal">{{ t('Add chart to grid') }}</button>
        <button type="button" class="btn btn-secondary" id="closeModalButton" data-bs-dismiss="modal">{{ t('Close') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="logAnalyseModal" tabindex="-1" aria-labelledby="logAnalyseModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="logAnalyseModalLabel">{{ t('Log statistics') }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <div id="logAnalyseDialog">
          <p>
            {{ t('Selected time range:') }}
            <input type="text" name="dateStart" class="datetimefield" value="">
            -
            <input type="text" name="dateEnd" class="datetimefield" value="">
          </p>

          <input type="checkbox" id="limitTypes" value="1" checked>
          <label for="limitTypes">
            {{ t('Only retrieve SELECT,INSERT,UPDATE and DELETE Statements') }}
          </label>
          <br>

          <input type="checkbox" id="removeVariables" value="1" checked>
          <label for="removeVariables">
            {{ t('Remove variable data in INSERT statements for better grouping') }}
          </label>

          <p>
            {{ t('Choose from which log you want the statistics to be generated from.') }}
          </p>
          <p>
            {{ t('Results are grouped by query text.') }}
          </p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
        <button type="button" class="btn btn-primary" id="logAnalyseModalSlowLogButton">{{ t('From slow log') }}</button>
        <button type="button" class="btn btn-primary" id="logAnalyseModalGeneralLogButton">{{ t('From general log') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="queryAnalyzerModal" tabindex="-1" aria-labelledby="queryAnalyzerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="queryAnalyzerModalLabel">{{ t('Query analyzer') }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <div id="queryAnalyzerDialog">
          <div>
            <textarea id="sqlquery" aria-label="{{ t('Query') }}"></textarea>
          </div>
          <div class="placeHolder"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
        <button type="button" class="btn btn-primary" id="queryAnalyzerModalAnalyseButton">{{ t('Analyse query') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="analysingLogsModal" tabindex="-1" aria-labelledby="analysingLogsModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="analysingLogsModalLabel">{{ t('Analysing logs') }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Cancel request') }}"></button>
      </div>
      <div class="modal-body">
        <p>{{ t('Analysing and loading logs. This may take a while.') }}</p>
        <div class="spinner-border" role="status">
          <span class="visually-hidden">{{ t('Loading…') }}</span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Cancel request') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="analysingLogsNoDataFoundModal" tabindex="-1" aria-labelledby="analysingLogsNoDataFoundModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="analysingLogsNoDataFoundModalLabel">{{ t('No data found') }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        {{ t('Log analysed, but no data found in this time span.') }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="analysingLogsLogDataLoadedModal" tabindex="-1" aria-labelledby="analysingLogsLogDataLoadedModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="analysingLogsLogDataLoadedModalLabel">{{ t('Loading logs') }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <p>{{ t('Log data loaded. Queries executed in this time span:') }}</p>
        <div></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
        <button type="button" class="btn btn-primary" id="analysingLogsLogDataLoadedModalJumpButton">{{ t('Jump to the log table') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="serverResponseErrorModal" tabindex="-1" aria-labelledby="serverResponseErrorModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="serverResponseErrorModalLabel">{{ t('Monitor refresh failed') }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <span aria-label="{{ t('Warning:') }}">{{ get_image('s_attention') }}</span>
        {{ t('While requesting new chart data the server returned an invalid response. This is most likely because your session expired. Reloading the page and reentering your credentials should help.') }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
        <button type="button" class="btn btn-primary" id="serverResponseErrorModalReloadButton">{{ t('Reload page') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="incompatibleMonitorConfigModal" tabindex="-1" aria-labelledby="incompatibleMonitorConfigModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="incompatibleMonitorConfigModalLabel">{{ t('Local monitor configuration incompatible!') }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <span aria-label="{{ t('Warning:') }}">{{ get_image('s_attention') }}</span>
        {{ t('The chart arrangement configuration in your browsers local storage is not compatible anymore to the newer version of the monitor dialog. It is very likely that your current configuration will not work anymore. Please reset your configuration to default in the [em]Settings[/em] menu.')|sanitize }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
      </div>
    </div>
  </div>
</div>

<div class="clearfloat"></div>
<div><table class="clearfloat tdblock" id="chartGrid"></table></div>
<div id="logTable"><br></div>

<script>
  var variableNames = [
    {% for variable_name in javascript_variable_names %}
      "{{ variable_name|e('js') }}",
    {% endfor %}
  ];
</script>

<form id="js_data" class="hide">
  {% for name, value in form %}
    <input type="hidden" name="{{ name }}" value="{{ value }}">
  {% endfor %}
</form>

<div id="profiling_docu" class="hide">
  {{ show_mysql_docu('general-thread-states') }}
</div>

<div id="explain_docu" class="hide">
  {{ show_mysql_docu('explain-output') }}
</div>

{% endblock %}
